<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript">

        layui.use(['table',"jquery","layer","form","upload"], function() {
            var upload = layui.upload;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            table.render({
                //请求地址
                url: "${pageContext.request.contextPath} /selectAllUser"
                //开启分页
                , page: true
                //id
                , toolbar: "#myToolbar"
                , elem: "#myTable"
                //工具栏
                , cols: [
                    [{type: "checkbox", rowspan: 2}
                        , {title: "用户编号", field: "userId", align: "center"}
                        , {title: "电话号码", field: "userTelphone", align: "center"}
                        , {title: "用户头像", field: "userImage", align: "center"}
                       // , {title: "用户昵称", field: "userNickname", align: "center"}
                        , {title: "用户名", field: "userName", align: "center"}
                        //, {title: "性别", field: "userSex", align: "center"}
                        , {title: "个性签名", field: "userAutograph", align: "center"}
                       // , {title: "省份", field: "userProvince", align: "center"}
                       // , {title: "城市", field: "userCity", align: "center"}
                        , {title: "用户状态", field: "userStatus", align: "center",templet: "#statusTemplet"}
                        , {title: "操作", rowspan: 2, templet: "#myCaozuoTemplet"}









                    ]

                ]
            })

            //监控工具栏事件
            table.on("toolbar(myTableFilter)", function (obj) {
                switch (obj.event) {
                    case 'search': {
                        var a = $("#stuName").val();
                        //alert(a)
                        //重新加载表单
                        table.reload("myTable", {
                            "where": {"name": a}
                        })

                    }
                        break;
                    case "add":
                        $("#mySubmitButton").prop("name","add");
                        $("#mySubmitButton").html("确认添加");
                        //alert("add");

                        $("#bannerOldName").val("");

                        $("#myPhoto").prop("src","").prop("style","display:none");
                        $("#test1").html(" <i class=\"layui-icon\">&#xe67c;</i>上传图片");
                        $("#bannerDescription").val("");
                        layerIndex=layer.open({type:1,content:$("#updateForm")});
                        form.render();
                        break;
                }
            })

            //监控表格数据情况
            table.on('tool(myTableFilter)', function (obj) {
                //获取当前行的数据
                //console.log(obj.data)
                //获取点击按钮事件
                //console.log(obj.event);
                switch (obj.event) {


                    case "update":
                        console.log(obj.data)
                       alert(obj.data.userStatus)
                        $.ajax({
                            url:"/updateStatus"
                            ,data:{id:obj.data.userId,status:obj.data.userStatus}
                            ,type:"post"
                            ,success:function(data){
                                if (data.isOk) {
                                    if(obj.data.userStatus==0){
                                        layer.msg("账号已激活", {icon: 6})

                                    }else if(obj.data.userStatus==2){
                                        layer.msg("账号已冻结", {icon: 6})

                                    }else if(obj.data.userStatus==3){

                                        layer.msg("账号已解除冻结", {icon: 6})
                                    }

                                    table.reload("myTable")

                                } else {
                                    layer.msg("操作失败", {icon: 1})

                                }
                            }
                        })
                        break;
                    case "delete":
                        // alert("delete");
                        console.log(obj.data);
                        $.ajax({
                            url:"deleteUser"
                            ,data:{id:obj.data.userId}
                            ,type:"post"
                            ,success:function(data){
                                if (data.isOk) {
                                    layer.msg("删除成功", {icon: 6})
                                    table.reload("myTable")
                                } else {
                                    layer.msg("删除失败", {icon: 1})

                                }
                            }
                        })
                        break;
                }
            })

        })

    </script>

</head>
<body>
<table id="myTable" lay-filter="myTableFilter" ></table>
<%--工具栏模板--%>
<script type="text/html" id="myToolbar">

    <div class="layui-btn-container layui-inline">
        <button class="layui-btn layui-btn-lg layui-btn-danger" lay-event="add">添加</button>
    </div>
</script>
<%--这个是没一行后面对应的按钮--%>
<script type="text/html" id="myCaozuoTemplet">
    <%--<a class="layui-btn layui-btn-sm layui-btn-sm" lay-event="edit">修改</a>--%>
    <%--<a class="layui-btn layui-btn-sm layui-btn-sm" lay-event="delete">删除</a>--%>

    {{#  if(d.userStatus ==0){ }}
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="update">激活用户</a>
    {{#  } else if(d.userStatus ==2) { }}
    <a class="layui-btn layui-btn-sm layui-btn layui-btn-normal" lay-event="update">冻结用户</a>
    {{#  } else if(d.userStatus ==3) { }}
    <a class="layui-btn layui-btn-sm layui-btn layui-btn-warm" lay-event="update">解除冻结</a>
    {{#  } else  { }}
      {{#  } }}

</script>

<script type="text/html" id="photoTemplet">
    <img src="{{d.bannerImageUrl}}" id="" width="120" height="90"/>
</script>

<script type="text/html" id="statusTemplet">
    {{#  if(d.userStatus ==0){ }}
            账号未激活
    {{#  } else if(d.userStatus ==3) { }}
             账号已冻结
    {{#  } else if(d.userStatus ==2) { }}
            账号已激活
    {{#  } else  { }}
            账号已解冻
    {{#  } }}
</script>


   <%----%>

<%--修改的表单--%>
    <form enctype="multipart/form-data" class="layui-form" id="updateForm" style="display:none;">
        <input name="userId" id="userId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">图片信息</label>
            <div class="layui-input-block">
                <input type="text" name="bannerOldName" id="bannerOldName" required  lay-verify="required" placeholder="请输入图片名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">轮播照片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <img src="" style="display:none" name="ppp"  id="myPhoto" width="100" height="80">
            </div>
        </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-inline">
            <input type="text" name="bannerDescription" id="bannerDescription" required lay-verify="required" placeholder="请输入图片描述" autocomplete="off" class="layui-input">
        </div>
    </div>


        <div class="layui-form-item">
            <label class="layui-form-label">图片上传日期</label>
            <div class="layui-input-inline">
                <input type="text" name="bannerDate" id="bannerDate" required lay-verify="required" placeholder="请输入图片描述" autocomplete="off" class="layui-input">
            </div>
        </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFormFilter" name="edit" id="mySubmitButton">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
   </form>

    </body>
</html>
